
<html>
    
    <head>
        <meta charset="utf-8">
        <title>TM Piano</title>
        
        <style>
            .piano {
                position:relative;
                height:200px;
                margin: 20px;
            }
            
            .white-key-set {
                position:absolute;
                left:0px;
                display:-webkit-box;
                display:-moz-box;
                display: box;
            }
            
            .white-key-set .keyboard {
                display:-moz-box;
                width:40px;
                height:200px;
                border:solid 1px black;
                background-color: #eee;
                -webkit-animation-name: play;
                -webkit-animation-duration: 0.25s;
                -webkit-animation-play-state: paused;
                -webkit-animation-delay: 0.1s;
            }
            
            @-webkit-keyframes play {
                0% {
                    background-color: #aaa;
                }
                50% {
                    -webkit-transform: rotateX(30deg)
                }
                100% {
                    background-color: #eee;
                }
            }
            
            .black-key-set {
                display:-webkit-box;
                display:-moz-box;
                display: box;
                position:absolute;
                top: 1px;
                left: 25px;
            }
            
            .black-key-set .keyboard {
                display:-moz-box;
                width:30px;
                height:120px;
                border:solid 1px white;
                margin-right: 10px;
                background-color: #000;
                -webkit-animation-name: play-black;
                -webkit-animation-duration: 0.25s;
                -webkit-animation-play-state: paused;
                -webkit-animation-delay: 0.1s;
            }
            
            @-webkit-keyframes play-black {
                0% {
                    background-color: #000;
                }
                50% {
                    -webkit-transform: rotateX(30deg)
                }
                100% {
                    background-color: #aaa;
                }
            }
        </style>
        
        <script src="script.js"></script>
        
    </head>
    
    <body>
        
        <h1>TM Piano</h1>
        <div class="piano">
            <div class="white-key-set">
                <div class="keyboard" name="C3"></div>
                <div class="keyboard" name="D3"></div>
                <div class="keyboard" name="E3"></div>
                <div class="keyboard" name="F3"></div>
                <div class="keyboard" name="G3"></div>
                <div class="keyboard" name="A3"></div>
                <div class="keyboard" name="B3"></div>
                <div class="keyboard" name="C4"></div>
            </div>
            <div class="black-key-set">
                <div class="keyboard" name="pC3"></div>
                <div class="keyboard" name="pD3"></div>
                <div class="keyboard" name="nameless" style="visibility:hidden;"></div>
                <div class="keyboard" name="pF3"></div>
                <div class="keyboard" name="pG3"></div>
                <div class="keyboard" name="pA3"></div>
            </div>
        </div>
        
        <div>
            <textarea class="music-area" rows="8" cols="100">
C3,D3,E3,F3,G3,A4,B4,C4,
a,s,d,f,j,k,l,;,
ド,レ,ミ,ファ,ソ,ラ,シ 1000,
</textarea><br />
            <button class="play-button">Play</button>
        </div>
        
        <div>
            <h2>Music List</h2>
            <ul>
                <li><a class="music" name="カエルの歌" href="#">カエルの歌</a></li>
                <li><a class="music" name="チューリップ" href="#">チューリップ</a></li>
            </ul>
        </div>
        
    </body>

</html>
